
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.fz(@px){
	.px2rem(font-size,@px);
}
*{
	.px2rem(font-size,24);
}

.header{
	position: fixed;
	width: 100%;
	z-index: 100;
	.px2rem(height,90);
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	.px2rem(line-height,65);
	div{
		.px2rem(height,65);
		background: #fff;
		border: 1px solid #e2e2e2;
		border-radius: 5px;
	}
	.left{
		width: 70%;
		display: flex;
		p{
			white-space: nowrap;
			box-sizing: border-box;
		}
		p:first-child{
			width: 25%;
			border-right: 1px solid #e2e2e2;
			.icon{
				display: inline-block;
				overflow: hidden;
				width: 4px;
				height: 4px;
				margin-left: 10px;
				border: 1px solid #000;
				border-width: 1px 1px 0 0;
				transform: rotate(135deg);
			    transform-origin: 75% 25%;
			}
		}
		p:last-child{
			flex: 1;
			color: #9f9f9f;
		}
	}
	.center{
		.px2rem(width,70);
		.px2rem(margin-left,10);
		.px2rem(margin-right,10);
		p{
			.px2rem(font-size,48);
		}
	}
	.right{
		width: 10%;
		.px2rem(width,70);
		p{
			.px2rem(font-size,48);
		}
	}
}


.banner{
	.px2rem(height,340);
	.swiper-wrapper{
		.swiper-slide{
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.swiper-pagination{
        .swiper-pagination-bullet-active{
            background-color: white;
        }
    }
}

.list{
	border-bottom: 1px solid #e2e2e2;
	background: #fff;
	.row{
		display: flex;
		.px2rem(padding-top,20);
		dl{
			width: 25%;
			text-align: center;
			dt{
				img{
					width: 50%;
				}
			}
			dd{
				.px2rem(padding-bottom,10);
			}
		}
	}
	.insert{
		.inser{
			display: none;
			.ins{
				background: #f3f4f8;
				display: flex;
				flex-wrap: wrap;
				text-align: center;
				.px2rem(margin-top,20);
				.item{
					width: 25%;
					border-right: 1px solid #e2e2e2;
					box-sizing: border-box;
					.px2rem(margin-top,10);
					.px2rem(margin-bottom,10);
					color: #7a7a7a;
				}
				.item:nth-child(4n){
					border-right: none;
				}
				.item:last-child{
					color: #98d6fb;
				}
			}
		}
	}
	
}

.boutique{
	background: #fff;
	.px2rem(height,340);
	.px2rem(margin-top,12);
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
	display: flex;
	.left{
		width: 55%;
		box-sizing: border-box;
		border-right: 1px solid #e2e2e2;
		.px2rem(padding,20);
		img{
			width: 100%;
		}
	}
	.right{
		flex: 1;
		display: flex;
		flex-direction: column;
		.service{
			flex: 1;
			.px2rem(padding,20);
			height: 33.333%;
			box-sizing: border-box;
			p{
				white-space: nowrap;
				.px2rem(line-height,36);
			}
			.info{
				.px2rem(font-size,12);
				color: #c9cac9;
			}
			img{
				.px2rem(width,120);
				float: right;
			}
		}
		.service:nth-child(2){
			border-top: 1px solid #e2e2e2;
			border-bottom: 1px solid #e2e2e2;
		}
	}
}

.summary{
	.px2rem(height,135);
	.px2rem(padding,20);
	background: #fff;
	display: flex;
	justify-content: space-between;
	a{
		width: 49%;
		img{
			width: 100%;
		}
	}

}

.hot{
	display: flex;
	justify-content: center;
	alige-items: center;
	.px2rem(height,80);;
	.px2rem(line-height,80);
	color: #8f9092;
	p{
		margin: 0 2%;
		.px2rem(padding-left,55);
		background: url(../images/icon.png) no-repeat left center;
		background-size: 30%;
		font-weight: bold;
	}
	span{
		width: 10%;
		height: 50%;
		border-bottom: 1px solid #ccc;
	}
}

.hotlist{
	background: #fff;
	.px2rem(padding-bottom,100);
	.items{
		img{
			width: 100%;
			display: block;
		}
		.info{
			display: flex;
			align-items: center;
			color: #9a9a9a;
			.px2rem(padding-left,20);
			.px2rem(padding-right,20);
			.left{
				width: 60%;
			}
			.right{
				flex: 1;
				text-align: right;
				p{
					span{
						.px2rem(font-size,40);
						color: #fe4e03;
					}
				}
				p:last-child{
					.px2rem(font-size,12);
					.px2rem(margin-top,10);
					.px2rem(margin-bottom,10);
					text-decoration: line-through;
				}
			}
		}
	}
}

.box{
	background: rgba(0,0,0,0.1);
	.px2rem(padding-top,100);
	.px2rem(padding-bottom,100);
	i{
		.px2rem(font-size,100);
		.px2rem(margin-left,320);
	}
}


